<template>
    <!-- author：jiayi zhu
     date: 2018-3-23
     describe：用户管理-->
    <div class="control">
        <!-- 用户表格 -->
        <div class="dataTable" :style="{'height':dataHei}">
            <!-- <div class="modify">
                <el-button type="primary" plain @click="addUser()"><i class="el-icon-plus"></i>添加用户</el-button>
            </div> -->
            <!-- 引入的table组件 -->
            <jn-tablemanage 
                v-loading="loading"
                element-loading-text="拼命加载中"
                :tableData="Data" 
                :tableConfig="tableConfig"
                :pagiData="pagiData"
                v-on:handlePageChange="pageChange" 
                v-on:handleSizeChange="handleSizeChange">
            </jn-tablemanage>
        </div>     
    </div>
</template>

<script>
import "@/assets/css/common.css"
import jnTablemanage from '@/components/tableComponent.vue'
import {setCookie,getCookie,delCookie} from '@/tools/cookie'

export default {
    name: 'dataLog',
        data () {
        return {
            pagiData:{
                currentPage:1,
                pageSizes:[12,24,36],
                pageSize:10,
                total:20
            },
            pageObj:{
                page:1,
                pageSize:12
            },

            tableConfig: {
                heightConfig:630,
                // ***操作选项的宽度
                handleWidth:150,
                //   ***ifSelected是否可多选 必传
                ifSelected:false,   
                //   ***ifIndex是否有序号 必传
                ifIndex: true,
                //   ***ifHandle是否有操作项 必传
                ifHandle: false,
                // ***ifPagination是否需要分页栏 必传
                ifPagination:true,
                //   ***titleData: 表头的值 prop：指当列在userData的key; label:指当列的表头的值；width:当列的宽 必传
                titleData:[ {
                    prop: "sensor_num",
                    label: "传感器编号",
                    // width: "400"
                  },
                  {
                    prop: "data",
                    label: "数值",
                    // width: "400"
                  },
                  {
                    prop: "add_time",
                    label: "时间",
                    // width: "200"
                  }],
                //   ***handleData: 有操作按钮的需要传入的值；当ifHandle为true时必传
                //   ***key：该按钮的代表值,用来区分点击了哪个按钮；
                //   ***btnName:该按钮的显示值；
                //   ***btnIcon:该按钮的icon的class
            handleData: [ {
                    key: 'edit',
                    btnName: '编辑',
                    btn:true,
                    btnIcon: 'el-icon-edit',
                },{
                    key: 'delete',
                    btnName: '删除',
                    btn:true,
                    btnIcon: 'el-icon-delete',
                }],
            },

            loading:false,
            Data:[{
                equipmentId:'2018032701',
                data:'90',
                time:'2018-03-27 13:41:35'
            }],
        }
    },
    methods: {
        getDataApi(){
            var vm=this
            $.ajax({
                url: "http://by.gole.site/api/data/get",
                type: 'POST',
                async:false,
                data: {
                    token:getCookie('token'),
                    page:vm.pageObj.page,
                    limit:vm.pageObj.pageSize
                },
            }).done(function(res) {
                if(res.status==0){
                    vm.$message({
                      message:res.msg,
                      type: 'warning'
                    });
                }else{
                    vm.Data=res.data.data
                    vm.pagiData.currentPage=res.data.current_page
                    vm.pagiData.total=res.data.total
                    vm.pagiData.pageSize=Number(res.data.per_page)
                }
            }).fail(function(res) {
                vm.$notify.error({
                  message: '数据请求失败！'
                });
            });
        },
        pageChange(val){
            this.pageObj.page=val
            this.getDataApi();
        },
        handleSizeChange(size){
            this.pageObj.pageSize=size
            this.getDataApi();
        }

    },
    mounted(){
        this.getDataApi();
        if(getCookie('level')!=2){
            window.history.back(-1);
        }
    },
    components:{
      jnTablemanage
    },
    computed:{
        dataHei:function(){
          var dataHei=(document.documentElement.clientHeight-110)+'px'
          return dataHei
        },
    }
}
</script>

<style>
.el-dialog__body{
    max-height:560px !important;
    overflow: auto !important;
}
.el-upload--picture-card{
    width:60px !important;
    height:60px !important;
    line-height: 60px !important;
}
</style>